<template>
  <dv-border-box-8 class="map-container">
    <div id="amap" class="map"></div>
    <div id="leaflet-map" class="map"></div>
  </dv-border-box-8>
</template>

<script setup>
import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

const myMap = ref(null);
onMounted(() => {
  initAMap();
  initLeafletMap();
})
const initAMap = () => {
  AMapLoader.load({
    key: "e5a485f5ed9cfe6ab78394fe306c3b74", // 申请好的Web端开发者Key，首次调用 load 时必填
    // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      myMap.value = new AMap.Map("amap", {
        // 设置地图容器id
        zoom: 10,
        center: [116.397428, 39.90923],
      });
    })
    .catch((e) => {
      console.log(e);
    });
};

const initLeafletMap = () => {
  const map = L.map("leaflet-map").setView([39.90923, 116.397428], 10);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
  }).addTo(map);
}

</script>

<style scoped>
.map-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}

.map {
  width: 45%;
  height: 90%;
  border: 1px solid #ccc;
}
</style>
